"use client";

import {useAuth} from "@/components/authProvider";

// const LOGIN_URL = "http://localhost:8000/auth/token_v2";
// 访问next js的地址/api/login 使用route.jsx可以定义不同method的请求方式来处理不同的请求 同时也可以使用USE SERVER
const LOGIN_URL = "/api/login";

export default function PageOld() {
    const auth = useAuth();
    async function handleSubmit(event) {
        // 整体思路：
        //     1、获取表单数据 转换成json格式 将数据发送给 nextjs /api/login
        //     2、/api/login 获取数据将数据发送给fastapi后端获取到access_token 并将 token设置到session中

        // 禁止页面地址跳转 会拼接form表单中的key和value到提交地址中/login?username=xxx&password=xxx
        event.preventDefault();
        // event.target <form>标签里的html内容
        console.log(event, event.target);

        // 构建表单数据
        const formData = new FormData(event.target);
        // 从表单中获取数据对象
        const objectFromForm = Object.fromEntries(formData);
        // 将对象转换为json格式 {"username":"xxx","password":"xxx"}
        const jsonData = JSON.stringify(objectFromForm);
        // console.log(jsonData);
        // 构建请求信息：请求方式、请求头、请求体
        const requestOptions = {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: jsonData,
        }
        // 从next js 定义的 /api/login 地址请求数据
        const response = await fetch(LOGIN_URL, requestOptions);
        const data = await response.json();
        console.log(data);
        if (response.ok) {
            console.log("logged in");
            auth.login();
        }
    }
    return (
        <div className="h-[95vh]">
            <div className="max-w-md mx-auto py-5">
                <h1>Login Here</h1>
                <form onSubmit={handleSubmit}>
                    <input type="text" required name="username" placeholder="Your Username" />
                    <input type="password" required name="password" placeholder="Your Password" />
                    <button type="submit">Login</button>
                </form>
            </div>
        </div>
    )
}